<template>
  <view class="detail-page">
    <!-- 商品图片轮播 -->
    <view class="image-section">
      <swiper class="image-swiper" indicator-dots circular>
        <swiper-item v-for="(image, index) in goodsDetail.images" :key="index">
          <image class="goods-image" :src="image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品信息 -->
    <view class="info-section">
      <view class="price-row">
        <text class="current-price">¥{{ goodsDetail.price }}</text>
        <text v-if="goodsDetail.originalPrice" class="original-price"
          >¥{{ goodsDetail.originalPrice }}</text
        >
      </view>
      <text class="goods-title">{{ goodsDetail.title }}</text>
      <view class="meta-info">
        <text class="meta-item">{{ goodsDetail.viewCount }}次浏览</text>
        <text class="meta-item">{{ formatTime(goodsDetail.publishTime) }}</text>
      </view>
    </view>

    <!-- 商品描述 -->
    <view class="description-section">
      <view class="section-title">
        <text class="title-text">商品描述</text>
      </view>
      <text class="description-text">{{ goodsDetail.description }}</text>
    </view>

    <!-- 卖家信息 -->
    <view class="seller-section">
      <view class="section-title">
        <text class="title-text">卖家信息</text>
      </view>
      <view class="seller-info">
        <image
          class="seller-avatar"
          :src="goodsDetail.sellerAvatar"
          mode="aspectFill"
        />
        <view class="seller-details">
          <text class="seller-name">{{ goodsDetail.sellerName }}</text>
          <text class="seller-location">{{ goodsDetail.location }}</text>
        </view>
        <button class="contact-btn" @click="contactSeller">联系卖家</button>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-item" @click="toggleFavorite">
          <uni-icons
            :type="goodsDetail.isFavorite ? 'heart-filled' : 'heart'"
            :color="goodsDetail.isFavorite ? '#FF4444' : '#666666'"
            size="24"
          />
          <text class="action-text">收藏</text>
        </view>
        <view class="action-item" @click="shareGoods">
          <uni-icons type="redo" color="#666666" size="24" />
          <text class="action-text">分享</text>
        </view>
      </view>
      <button class="buy-btn" @click="contactSeller">立即联系</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getGoodsDetail } from "../../api/goods";
import { toggleFavorite as toggleFavoriteApi } from "../../api/user";
import type { GoodsItem } from "../../types/goods";
import { formatTime } from "../../utils/format";
import { GoodsStatus } from "../../types/goods";

// 响应式数据
const goodsId = ref("");
const goodsDetail = ref<GoodsItem>({
  id: "",
  title: "",
  description: "",
  price: 0,
  images: [],
  categoryId: "",
  categoryName: "",
  status: GoodsStatus.AVAILABLE,
  sellerId: "",
  sellerName: "",
  sellerAvatar: "",
  location: "",
  viewCount: 0,
  favoriteCount: 0,
  isFavorite: false,
  publishTime: "",
  updateTime: "",
});
const loading = ref(false);

// 页面加载时获取参数
onLoad((options: { id: string }) => {
  if (options?.id) {
    goodsId.value = options.id;
    loadGoodsDetail();
  }
});

// 加载商品详情
const loadGoodsDetail = async () => {
  if (!goodsId.value) return;

  loading.value = true;

  try {
    // TODO: 调用真实API
    // const response = await getGoodsDetail(goodsId.value)
    // goodsDetail.value = response.data

    // 模拟数据
    goodsDetail.value = {
      id: goodsId.value,
      title: "九成新牛仔外套，质量很好，适合春秋季节穿着",
      description:
        "这件牛仔外套是我去年买的，质量非常好，面料舒适，版型修身。因为搬家需要处理一些物品，所以低价转让。衣服保养得很好，没有明显的磨损和污渍，适合身高160-170cm的朋友穿着。",
      price: 89,
      originalPrice: 199,
      images: ["/static/c1.png", "/static/c2.png", "/static/c3.png"],
      categoryId: "1",
      categoryName: "服装",
      status: GoodsStatus.AVAILABLE,
      sellerId: "1",
      sellerName: "张女士",
      sellerAvatar: "/static/logo.png",
      location: "北京市朝阳区",
      viewCount: 128,
      favoriteCount: 15,
      isFavorite: false,
      publishTime: "2024-01-15T10:30:00Z",
      updateTime: "2024-01-15T10:30:00Z",
    };
  } catch (error) {
    console.error("加载商品详情失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 收藏/取消收藏
const toggleFavorite = async () => {
  try {
    // TODO: 调用真实API
    // await toggleFavoriteApi(goodsDetail.value.id)

    // 模拟切换收藏状态
    goodsDetail.value.isFavorite = !goodsDetail.value.isFavorite;

    uni.showToast({
      title: goodsDetail.value.isFavorite ? "收藏成功" : "取消收藏",
      icon: "success",
    });
  } catch (error) {
    console.error("收藏操作失败:", error);
    uni.showToast({
      title: "操作失败",
      icon: "none",
    });
  }
};

// 联系卖家
const contactSeller = () => {
  uni.showModal({
    title: "联系卖家",
    content: "是否要联系卖家？",
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现联系卖家功能（如跳转到聊天页面或拨打电话）
        uni.showToast({
          title: "功能开发中",
          icon: "none",
        });
      }
    },
  });
};

// 分享商品
const shareGoods = () => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 0,
    href: "",
    title: goodsDetail.value.title,
    summary: goodsDetail.value.description,
    imageUrl: goodsDetail.value.images[0],
    success: () => {
      uni.showToast({
        title: "分享成功",
        icon: "success",
      });
    },
    fail: () => {
      uni.showToast({
        title: "分享失败",
        icon: "none",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.image-section {
  width: 100%;
  height: 750rpx;
  background-color: #ffffff;
}

.image-swiper {
  width: 100%;
  height: 100%;
}

.goods-image {
  width: 100%;
  height: 100%;
}

.info-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.price-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.current-price {
  font-size: 48rpx;
  color: #ff4444;
  font-weight: bold;
  margin-right: 20rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999999;
  text-decoration: line-through;
}

.goods-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: block;
}

.meta-info {
  display: flex;
  align-items: center;
}

.meta-item {
  font-size: 24rpx;
  color: #999999;
  margin-right: 30rpx;
}

.description-section,
.seller-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  margin-bottom: 20rpx;
}

.title-text {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.description-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
}

.seller-info {
  display: flex;
  align-items: center;
}

.seller-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.seller-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.seller-name {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.seller-location {
  font-size: 24rpx;
  color: #999999;
}

.contact-btn {
  background-color: #07c160;
  color: #ffffff;
  font-size: 24rpx;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  border: none;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #eeeeee;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.action-left {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
}

.action-text {
  font-size: 20rpx;
  color: #666666;
  margin-top: 5rpx;
}

.buy-btn {
  flex: 1;
  height: 80rpx;
  background-color: #07c160;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 40rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
